/**
 * @Author: zhi1hw hanwei@zhi1tech.com
 * @Date: 2024-06-16 12:50:00
 * @LastEditors: zhi1hw hanwei@zhi1tech.com
 * @LastEditTime: 2024-07-14 19:32:56
 * @FilePath: \code\src\store\modules\theme.ts
 * @Description: Theme store using Zustand for React
 */

import { create } from 'zustand';

export interface ITheme {
  [key: string]: string;
}

// Theme colors definition
const themeColors = {
  // 主色
  // 辅色
  // 文字色
  textColor: "#243336", // 常规/正文标题
  textColorLighten: "#7E8A8C", // 次要信息
  textColoDanger: "#E9262B", // 强调/正文标题
  textColorLightest: "#FFFFFF", // 浅色
  textColorGrey: "#999999",
  textColorBlock: "#28334A",
  
  // 边框色
  borderColor: "#C4CBCC", // 常规描边
  borderColorLighten: "#D6D6D6", // 次要描边
  borderColorLightest: "#FFFFFF", // 浅色
  
  // 填充色
  fillColor: "#5CB2FF", // 常规
  fillColorLighten: "#FAFAFA", // 次要
  fillColorDarken: "#5CB2FF", // 强调
  fillColorBg: "#D6D6D6", // 填充背景
  fillColorBg1: "#F2F2F2", // 填充背景
  fillColorLightest: "#F1F8FE", // 浅色
  fillBlueLight: 'rgba(92, 178, 255, .1)',
  fillWhite: '#FFFFFF',
  fillGrey: '#F4F6F9',
  
  // 阴影 【HEXA】
  shadowColor: "#d6d6d63f", // 常规
};

// Create theme store
interface ThemeState {
  theme: ITheme;
  email: string;
  setEmail: (value: string) => void;
}

export const useThemeStore = create<ThemeState>((set) => ({
  theme: themeColors,
  email: '',
  setEmail: (value: string) => set({ email: value }),
}));